<template>
    <div class="assignment-header">
      <img src="@/assets/svgs/left.svg" alt="Back" class="back-button" @click="router.push('/teacher/record/card')"/>
      <span class="correct_header1">已提交{{ feedback_header }}人</span>
    </div>
    <div v-if="loading">正在加载问卷结果...</div>
    <div v-else-if="error">加载失败，请稍后再试</div>
    <div v-else class="satisfaction-survey">
      <div class="improvement-suggestions">
        <div class="serial">
        <div class="serial1">1</div>
        <div class="serial2">改进建议</div>
        </div>
        <p style="color: #4B5563;">(辛苦同学们一定帮老师填写这一项，老师因全力以赴以让大家收获最大，建议、问题都可，老师特别期待你改进建议) 期末给高分主要参考，越详细越好，留言给激励，实在没得写可填“无”</p>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
        <div class="serial1">2</div>
        <div class="serial2">满意度 (100满意-0不满意)</div>
        </div>
        <el-table :data="satisfactionData" style="width: 100%;">
          <el-table-column prop="option" label="选项" width="600" />
          <el-table-column prop="count" label="计数" width="300" />
          <el-table-column label="百分比">
            <template #default="scope">
              <div class="demo-progress">
                <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percentage" status="success" :color="customColor" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="satisfaction-chart">
        <div class="serial">
        <div class="serial1">3</div>
        <div class="serial2">听课、跟上程度（100全听懂了-0完全没听懂）</div>
        </div>
        <el-table :data="satisfactionData" style="width: 100%;">
          <el-table-column prop="option" label="选项" width="600" />
          <el-table-column prop="count" label="计数" width="300" />
          <el-table-column label="百分比">
            <template #default="scope">
              <div class="demo-progress">
                <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percentage" status="success" :color="customColor" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRouter,useRoute } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { surveyService } from '@/api/feedbackresult';
  import {useCounterStore} from "@/stores/counter"
  
  //从pinia获取课程ID
  let store = useCounterStore();
  const courseManageId=store.courseManageId;
  console.log("获取的课程id:",courseManageId);
  //获取问卷id
  const route = useRoute(); // 获取当前路由对象
  const surveyId = ref(null);
  surveyId.value = route.params.surveyId; // 从路由参数中获取 surveyId
  console.log("获取到的问卷Id:", surveyId.value);
  
  const loading = ref(true);
  const error = ref(false);
  const apiData = ref(null);
  
  const resultsur = async () => {
    try {
      const response = await surveyService(surveyId);
      apiData.value = response.data; // 将 API 数据存储到响应式变量
      loading.value = false; // 加载完成
    } catch (err) {
      error.value = true; // 设置错误状态
      ElMessage.error('获取问卷内容失败，请稍后再试');
      console.error('Error:', err);
      loading.value = false; // 加载完成
    }
  };
  
  onMounted(() => {
    resultsur();
  });
  
  // const resultsur =  async () => {
  //   try {
  //     const response = await surveyService();
  //     console.log('API Response:', response.data); 
  //   } 
  //   catch (error) {ElMessage.error('获取问卷内容失败，请稍后再试');}
  // };
  // onMounted(() => {
  //   resultsur();
  // });
  
  const router = useRouter();
  const feedback_header = ref('1');
  const satisfactionData = ref([
    { option: '95-100很满意', count: 5, percentage: 50 },
    { option: '90-95满意', count: 1, percentage: 10 },
    { option: '80-90较满意', count: 1, percentage: 10 },
    { option: '60-80一般', count: 1, percentage: 10 },
    { option: '30-60不满意', count: 1, percentage: 10 },
    { option: '0-60很不满意', count: 1, percentage: 10 }
  ]);
  
  const totalFeedback = 100;
  const satisfactionPercentages = computed(() => satisfactionData.value.map(item => ({
    ...item,
    percentage: (item.count / totalFeedback) * 100
  })));
  
  const customColor = ref('#13227A');
  </script>
  
  
  <style scoped>
  .assignment-header {
      display: flex;
      height: 7lvh;
      width: 99lvw;
      background-color: #13227A;
      color: white;
  }
  
  .back-button {
      background-color: transparent;
      width: 3%;
      height: 7lvh;
      color: white;
      cursor: pointer;
  }
  
  .correct_header1 {
    margin-left: 89%;
    font-size: 20px;
    font-weight: 700;
    margin-top: 1%;
  }
  
  .satisfaction-survey {
    padding: 20px;
    background-color: #ffffff;
  }
  
  .improvement-suggestions {
    margin-bottom: 20px;
    background-color: aliceblue;
  }
  
  .satisfaction-chart {
    margin-top: 20px;
  }
  .demo-progress .el-progress--line {
    max-width: 600px;
  }
  
  .serial{
    display: flex;
    width: 100%;
    height: 20px;
  }
  .serial1{
    float: left;
    color: white;
    background-color: #13227A;
    width: 20px;  
    height: 20px;
    text-align: center;
    border-radius: 50%;
  }
  .serial2{
    margin-left: 5px;
    font-size: 17px;
    font-weight: 700;
  }
  </style>